<template>
    <section class="w-full h-full flex gap-col-4">
        <div class="w-300px box-border pa-4 bg-white">
            <dept-tree @select="handleSelectDept" />
        </div>
        <div class="flex-1 flex flex-col">
            <div class="bg-white box-border px-4 pt-4">
                <n-form
                    :model="queryParameter"
                    size="medium"
                    ref="queryFromRef"
                    label-width="110px"
                    label-placement="left"
                    require-mark-placement="right-hanging">
                    <NGrid cols="12" item-responsive responsive="screen">
                        <NFormItemGi span="12 s:12 m:6 l:6 xl:4 xxl:3" label="登录账号：" path="inputValue">
                            <n-input v-model:value="queryParameter.username" :maxlength="50" clearable placeholder="登录账号" :allow-input="(value) => !value.includes(' ')" />
                        </NFormItemGi>
                        <NFormItemGi span="12 s:12 m:6 l:6 xl:4 xxl:3" label="账号名称：" path="inputValue">
                            <n-input v-model:value="queryParameter.nickname" :maxlength="50" clearable placeholder="账号名称" :allow-input="(value) => !value.includes(' ')" />
                        </NFormItemGi>
                        <NFormItemGi span="12 s:12 m:6 l:6 xl:4 xxl:3" label="手机号：" path="inputValue">
                            <n-input v-model:value="queryParameter.mobile" :maxlength="50" clearable placeholder="手机号" :allow-input="(value) => !value.includes(' ')" />
                        </NFormItemGi>
                        <NFormItemGi span="12 s:12 m:6 l:6 xl:4 xxl:3" label="状态：" path="selectValue">
                            <n-select v-model:value="queryParameter.status" placeholder="状态" clearable :options="[{label: '', value: ''}, ...StatusOption]" />
                        </NFormItemGi>
                        <NFormItemGi span="12 s:12 m:12 l:12 xl:4 xxl:12">
                            <NSpace class="w-full" justify="end">
                                <NButton @click="reset" type="primary" strong secondary>重置</NButton>
                                <NButton @click="query" type="primary">搜索</NButton>
                            </NSpace>
                        </NFormItemGi>
                    </NGrid>
                </n-form>
            </div>
            <div class="flex-1 bg-white box-border pa-4 flex flex-col">
                <NDataTable
                    class="flex-1 h-full"
                    :columns="columnList"
                    :data="data"
                    :loading="loading"
                    :row-key="(row: Data) => row.identity"
                    :striped="true"
                    :bordered="true"
                    :remote="true"
                    :flex-height="true"
                    :single-line="false"
                    :pagination="pagination"
                    v-model:checked-row-keys="keyList">
                </NDataTable>
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
import {h} from 'vue'
import {Api} from '@/api/type'
import {BaseApi} from '@/api/base-api'
import {StatusOption} from '@/type/common'
import DeptTree from '@/view/system/dept/tree.vue'
import {useTable} from '@/hook/use-table'
import {TableColumn} from 'naive-ui/es/data-table/src/interface'
import {NButton, NDataTable, NForm, NFormItemGi, NGrid, NInput, NSelect, NSpace, NTag} from 'naive-ui'
// -------------------------------------------------
type R<T> = Api.Common.R<T>;
type Data = Api.System.User;
type PageRecord<T> = Api.Common.PageRecord<T>;
type PageParameter = Api.Common.PageParameter<Data>;
// -------------------------------------------------

const keyList = defineModel<Array<string>>('keyList', {
    default: () => []
})

const baseApi = new BaseApi<Data>('user')

const {
    data,
    loading,
    getData,
    columnList,
    pagination,
    queryParameter,
    resetParameter
} = useTable<Data, TableColumn<Data>>({
    queryFn: getPage,
    queryParameter: {
        username: '',
        nickname: '',
        mobile: '',
        status: ''
    },
    columnList: () => [
        {
            type: 'selection',
            title: '选择列',
            align: 'center',
            titleAlign: 'center',
            width: 48
        },
        {
            title: '登录账号',
            key: 'username',
            align: 'left',
            titleAlign: 'center'
        },
        {
            title: '账号名称',
            key: 'nickname',
            align: 'center',
            titleAlign: 'center'
        },
        {
            title: '手机号',
            key: 'mobile',
            align: 'center',
            titleAlign: 'center'
        },
        {
            title: '是否启用',
            key: 'status',
            align: 'center',
            titleAlign: 'center',
            render(row: Data) {
                return h(NTag, {
                    bordered: false,
                    type: row.status == 1 ? 'info' : 'error'
                }, {default: () => row.status == 1 ? '启用' : '禁用'})
            }
        },
        {
            title: '操作',
            key: 'operate',
            width: '160',
            align: 'center',
            titleAlign: 'center',
            render(row: Data) {
                return h(NSpace, {'justify': 'space-around'}, {
                        default: () => [
                            h(NButton, {onClick: () => selectData(row), size: 'small', type: 'primary', strong: true, secondary: true}, {default: () => '选择'})
                        ]
                    }
                )
            }
        }
    ] as TableColumn<Data>[]
})

/**
 * 选择部门
 */
async function handleSelectDept(parent: {key: string | number; label: string;}) {
    queryParameter.deptId = String(parent.key || '')
    await getData()
}

async function reset() {
    resetParameter()
    await getData()
}

async function query() {
    await getData()
}

async function getPage(query: PageParameter): Promise<R<PageRecord<Data>>> {
    let result: R<PageRecord<Data>> = await baseApi.getPageInfo(query)
    if (result.code == 0) {
        return result
    } else {
        throw Error(result.message)
    }
}

/**
 * 选择数据
 */
async function selectData(item: Data) {
    if (!keyList.value.includes(item.identity)) {
        keyList.value.push(item.identity)
    }
}
</script>
